<template>
 <div class='wrap'>
    <div class='container w'>
       <div class="merchant" v-for="item in 10" :key="item">
          <el-avatar :size="60" src="circleUrl"></el-avatar>
          <div class="nickname"><h3>超级管理员</h3></div>
          <div class="desc">介绍：对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。 ...</div>
          <div class="operation">
            <div >
              <router-link to="/mall"><el-link :underline="false" >进入店铺</el-link></router-link>
            </div>     
            <div >
              <router-link to="/mall"><el-link :underline="false" >删除</el-link></router-link>
            </div>
          </div>
     </div>
    </div>
   </div>
</template>

<script>
  export default {
    name: 'Merchant',
    components: {},
    data() {
      return {
      };
    },
    created() {},
    methods: {}, 
  };
</script>
<style lang="scss" scoped>
.container{
   display:flex;
   flex-wrap: wrap;
  justify-content: space-between;
}
.merchant:hover {
  cursor:pointer;  
   box-shadow: 0px 2px 10px 0px rgba(108, 161, 236, 0.5);
}
.merchant{
  display:flex;
  flex-direction: column;
  margin-top: 45px;
  position: relative;
  width: 220px;
  // height: 260px;
  border-radius: 8px;
  background:#fff;
}
.merchant:not(:nth-child(5n)) {
  margin-right: 25px;
}
.merchant:last-child:nth-child(5n - 1) {
  margin-right: calc(220px + 25px);
}
.merchant:last-child:nth-child(5n - 2) {
  margin-right: calc(220px + 220px + 25px + 25px);
}
.merchant:last-child:nth-child(5n - 3) {
  margin-right: calc(220px + 220px + 220px + 25px + 25px + 25px);
}
.el-avatar{
  position:absolute;
  border: 2px solid rgb(246, 243, 243);
  padding: 10px;
  box-shadow: 0 0 5px rgba(119, 139, 210, 0.5);
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}
.nickname{
  margin-top: 30px;
  text-align: center;
  // background:rgb(113, 89, 89);
}
.desc{
  padding: 0 15px;
  margin-bottom: 10px;
  width: 100%;
  font-size:14px;
  color: rgb(186, 168, 168);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.operation{
  display: flex;
  justify-content:space-between;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid rgb(234, 230, 230);
  border-top: 1px solid rgb(234, 230, 230);
  div{
    width: 100%;
    text-align: center;
  }
  div:nth-child(1){
    border-right: 1px solid rgb(234, 230, 230);
  }
}
</style>